<template>
	<view>
		<u-navbar :title="title" @custom-back="fan"></u-navbar>
		<view class="padding30rpx">
			<view v-for="(item,index) in list" :key="index">
				<view class="line dis" style="padding: 25rpx 0;">
					<view>{{item.name}}</view>
					<view>
						<label style="color: #FF542C; margin-right: 15rpx;">
							已解锁：{{item.unlocking}}
						</label>
						<u-icon name="arrow-down" color="#999999"></u-icon>
					</view>
				</view>
				<view>
					<view class="term-flex " v-for="(item1,index1) in item.tcurriculumList" :key="index1"
						@click="look(item,item1,index1)">
						<view class="dis" style="width: 100%;">
							<image class="term-flex-img" :src="item1.imgName"></image>
							<view style="flex: 1;width: 100%;">
								<view class="term-flex-tit clamp" style="height: 80rpx;">
									{{item1.name||''}}
								</view>
								<view style="margin-top: 10rpx; height: 35rpx;" class="hui99" v-if="item1.labelName">
									#{{item1.labelName||''}}</view>
								<view class="dis align-items u-row-between" style=" margin-top: 15rpx;height: 45rpx;">
									<view class="hui99" v-if="item1.progress == '100%'">当前学习进度：已学习</view>
									<view class="hui99" v-if="item1.progress =='0%'">当前学习进度：未学习</view>
									<view class="term-right" v-if="item1.progress == '100%'">查看成绩
									</view>
									<view class="term-right"
										style="color: #FFFFFF; background-color: #00a29a;border-radius: 5rpx;"
										v-if="item1.progress =='0%'">开始学习</view>
								</view>
							</view>
						</view>

					</view>
				</view>
				<button @click="dan(item)">{{item.name}}测试</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// title: '课程列表',
				list: [],
				id: ''
			}
		},
		onPullDownRefresh() {
			setTimeout(() => {
				this.selectUnitCourse()
			}, 800);
		},
		onLoad(option) {
			this.title = option.title + '课程列表'
			// console.log(title);
			// uni.setNavigationBarTitle({
			// 	title: title,
			// 	fail: (err) => {
			// 		console.log(err);
			// 	}
			// })
			this.id = option.id
			this.selectUnitCourse()
		},
		methods: {
			selectUnitCourse() {
				uni.request({
					method: 'GET',
					url: this.$api + '/app/PostController/selectUnitListAll',
					data: {
						postId: this.id
					},
					header: {
						'token': uni.getStorageSync('token')
					},
					success: (res) => {
						console.log(res.data)
						if (res.data.code == 401) {
							uni.navigateTo({
								url: '/pagesB/login/login'
							})
						}
						if (res.data.code == 200) {
							this.list = res.data.data
						} else {

						}
						uni.stopPullDownRefresh();
					}
				})
			},
			fan() {
				uni.navigateBack(1)
			},

			look(item, i, index) {
				if (!item.studyYES) {
					this.$mHelper.toast('未学到本课程')
					return;
				}
				console.log(index);
				if (index != 0) {
					console.log(item.tcurriculumList[index - 1].progress);
					if (item.tcurriculumList[index - 1].progress == '100%') {
						this.$mHelper.to('pages/term/course/course?id=' + i.id)
						return;
					} else {
						this.$mHelper.toast('未学到本课程')
						return;
					}
					return;
				}
				this.$mHelper.to('pages/term/course/course?id=' + i.id)
				// console.log(i.progress);
				// if (i.progress == '100%') {
				// 	this.$mHelper.toast('敬请期待')
				// } else {
				// 	this.$mHelper.to('pages/term/course/course?id=' + i.id)
				// }

			},
			lookpc(i) {

				uni.navigateTo({
					url: '/pages/term/course/course?id=' + i.id
				})
			},
			//查看成绩

		}
	}
</script>

<style lang="scss" scoped>
	button {
		background: #00a29a;
		color: #FFFFFF;
		width: 100%;
		font-size: 28rpx;
		margin-top: 35rpx;
	}

	.term-flex {
		display: flex;
		flex-wrap: wrap;
		margin-top: 25rpx;
		width: 100%;

		.term-flex-img {
			width: 180rpx;
			height: 180rpx;
			margin-right: 15rpx;
			border-radius: 10rpx;
		}

		.term-flex-tit {
			font-size: 30rpx;
			color: #333333;

		}

		.term-left {
			background: #D9F6FF;
			font-size: 24rpx;
			line-height: 45rpx;
			border-top-left-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
			padding: 0 10rpx;
			color: #00A29A;
		}

		.term-right {
			border: 1rpx solid #00A29A;
			color: #00A29A;
			font-size: 24rpx;
			padding: 4rpx 15rpx;
			margin-right: 20rpx;
			border-radius: 7rpx;
		}
	}
</style>
